<template>
  <div id="back">
    <div id="introduce">
      <h4 id="titleone">Insert monitoring</h4>
      <h4 id="titletwo">and early warning</h4>
    </div>
    <component :is="comname" id="entrance" @comname="getcom"></component>
  </div>
</template>

<script>
import UserLogin from "../components/login/UserLogin.vue";
import UserRegister from "@/components/login/UserRegister.vue";
export default {
  data() {
    return {
      comname: "UserLogin",
      // comname: "UserRegister",
    };
  },
  components: {
    UserLogin,UserRegister
  },
  methods:{
    getcom(val){
      console.log(val);
      this.comname = val;
    }
  }
};
</script>

<style lang="less" scoped>
#back {
  position: relative;
  width: 100%;
  background-image: url(../assets/img/1.jpg);
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  #introduce {
    color: rgba(255, 255, 255, 0.785);
    font-size: calc(100vw * 30 / 1920);
    position: absolute;
    margin-top: 15rem;
    background-color: rgba(49, 59, 198, 0.7);
    height: 15rem;
    width: 100%;
    #titleone {
      padding-top: 4rem;
      margin-left: 1.5rem;
    }
    #titletwo {
      margin-left: 3.5rem;
      margin-top: 1.5rem;
    }
  }
  #entrance {
    width: 30%;
    position: absolute;
    margin-left:60%;
    margin-right: 20px;
    margin-top: 5rem;
  }
}
@media screen and (max-width: 720px) {
  #introduce{
    height: 10rem !important;
    font-size: calc(100vw * 70 / 1920) !important;
    #titleone{
      padding-top:3rem !important;
    }
    #titletwo{
      margin-top: 1.2rem !important;
    }
  }
  #entrance{
    width: 45% !important;
    margin-left: 50% !important;
    margin-top: 10rem !important;


  }
}
</style>